<template>
	<view class="container">  
	    <scroll-view class="menu" scroll-x="true">  
	       <view  
	              class="menu-item"  
	              v-for="(item, index) in categories"  
	              :key="index"  
	              @click="menuItemClicked(index)"  
	              :class="{ 'active': currentIndex === index }"  
	            >  
	              {{ item.name }}  
	            </view>   
	    </scroll-view>  
		<navigator open-type="switchTab" url="/pages/category/category" class="right"><uni-icons type="list" size="24"></uni-icons>
		<!-- <view class="text">分类</view> -->
		</navigator>
	  </view>  
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from 'vue';
	import { getCategoryPanelApi } from "@/api/category/index.ts";
	import type { CategoryVo } from '@/api/category/types.ts';
	
	
	const categories = ref<CategoryVo[]>([]);
	const currentIndex = ref(0) ;
	
	const  menuItemClicked=(index: any)=> {  
	  currentIndex.value = index
      // 在这里添加点击后的逻辑，比如页面跳转  
    } 
	const getCategory = async () => {
		const res = await getCategoryPanelApi()
		console.log(res)
		categories.value= res.data
	}
	onLoad(() => {
		
		getCategory();
	})
	
</script>

<style>
	.container{
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		.right{ 
			height:50px;
			width: 80rpx;
			position: fixed;
			right: 1rpx;
			/* line-height: 50px; */
			background-color: #00BF9C;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			
		}
	}
.menu {  
  white-space: nowrap;  
  width: 100%;  
  height: 50px;  
  line-height: 50px;  
  background-color: #00BF9C;  
}  
  
.menu-item {  
  display: inline-block;  
  width: 150rpx;  
  text-align: center;  
  font-size: 16px;  
  color: #666;
}  
.menu-item.active {  
  color: #fff; /* 高亮颜色 */  
  font-weight: bold; /* 加粗 */  
}  
</style>